<template>
  <el-dialog :modelValue="show" :title="$t('383')" :close-on-click-modal="false" :close-on-press-escape="false"
    @close="onHideDetails">
    <div class="dialogMaxHeight" v-loading="data.loading">
      <div class="flex marginB10" v-for="(item,index) in data.fields" :key="index">
        <p class="width110">{{ item.label }}：</p>
        <p class="">
          <span v-if="item.prop == 'order_id'">【<span class="mustPass">{{ item.value }}</span>】</span>
          <span v-if="item.prop == 'created_time_stamp'">{{ timeToDate(item.value) }}</span>
          <span v-if="item.prop == 'round_id_str'">{{ item.value }}</span>
          <span v-if="item.prop == 'game_id'">{{  GameName(indexStore.gameArray, item.value) }}</span>
          <span v-if="item.prop == 'game_type'"><el-tag type="primary">{{ selectToLabel(GAMETYPE, item.value) }}</el-tag></span>
          <span v-if="item.prop == 'action_type'"><el-tag :type="item.value == 1 ? 'success' : 'danger'">{{ selectToLabel(ACTIONTYPE, item.value)}}</el-tag></span>
          <span v-if="item.prop == 'state'"><el-tag :type="item.value == 1 ? 'success' : props.checkedItem.msgId == 10001 ? 'warning':'danger'">{{ props.checkedItem.msgId == 10001 ? $t('506') : selectToLabel(ORDERSTATE, item.value) }}</el-tag></span>
          <span v-if="item.prop == 'msgId'">{{ selectToLabel(OrderMessage, item.value) }}</span>
          <span v-if="item.prop == 'server_name'"><el-tag>{{ props.checkedItem.region?props.checkedItem.region:data.dataInfo.server_name }}</el-tag></span>
          <span v-if="item.prop == 'cost'">{{ data.dataInfo.cost }}</span>
        </p>
      </div>
      <p>{{ $t('389') }}：</p>
      <div class="paddingLR20" v-if="props.checkedItem.wallet_type!=2">
        <p class="paddingL20 flex marginT10"><p class="width110 ">{{ $t('369') }}：</p> {{ data.dataInfo.status_code }}</p>
        <p class="paddingL20 flex"><p class="width110 ">{{ $t('386') }}：</p>{{ data.dataInfo.req.url }}</p>
        <p class="paddingL20 flex"><p class="width110 ">{{ $t('370') }}：</p>{{ data.dataInfo.req.method }}</p>
        <p class="paddingL20 flexWrap"><p class="width110 ">{{ $t('387') }}：</p> {{ data.dataInfo.rsp }}</p>
        <p class="paddingL20 flexWrap" style="word-break:break-all"><p class="width120 ">{{ $t('388') }}：</p>{{ JSON.stringify(data.dataInfo.req.param) }}</p>
      </div>
      <div class="paddingLR20" v-else>
        <p class="paddingL20 flex marginT10"><p class="width110 ">{{ $t('369') }}：</p> {{ data.dataInfo.rsp.status }}</p>
        <p class="paddingL20 flex" v-if="data.dataInfo.rsp.status!=50007"><p class="width110 ">{{ t('63') }}：</p>{{ BigWan(data.dataInfo.rsp.before) }}</p>
        <p class="paddingL20 flex" v-if="data.dataInfo.rsp.status!=50007"><p class="width110 ">{{ t('64') }}：</p>{{ BigWan(data.dataInfo.rsp.after) }}</p>
      </div>
      <div class="paddingLR20">
        <p class="paddingL20 flex" v-if="data.dataInfo.third_req_param?.uri"><p class="width120">第三方请求路径：</p>{{ data.dataInfo.third_req_param?.uri }}</p>
        <p class="paddingL20 flexWrap" v-if="data.dataInfo.third_req_param?.body" style="word-break:break-all"><p class="width120 ">第三方请求参数：</p>{{ JSON.stringify(data.dataInfo.third_req_param?.body) }}</p>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from 'vue'
import { timeToDate } from '@/utils/time'
import { ACTIONTYPE, GAMETYPE, ORDERSTATE, OrderMessage } from '@/config/eunm'
import { selectToLabel,GameName } from '@/utils/index'
import { BigWan } from '@/utils/math'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
watch(
  () => [props.show,props.checkedItem],
  async (value) => {
    if (value[0] && props.checkedItem) {
      setData()
    }
  }
)

// 数据
const data = reactive({
  fields: [
    { label: t('56'), prop: 'order_id', value:0 },
    { label: t('24'), prop: 'created_time_stamp', value:0 },
    { label: t('40'), prop: 'round_id_str', value:0 },
    // { label: t('384'), prop: 'agent_id', value:0 },
    { label: t('36'), prop: 'game_id', value:0 },
    { label: t('62'), prop: 'game_type', value:0 },
    { label: t('385'), prop: 'action_type', value:0 },
    { label: t('63'), prop: 'state', value:0 },
    { label: t('505'), prop: 'msgId', value:0 },
    { label: t('863'), prop: 'server_name', value: 0 },
    { label: t('864'), prop: 'cost', value:0 },
  ],
  dataInfo:{} as any,
  loading: false
})


// 处理数据
const setData = async () => {
  let keys=Object.keys(props.checkedItem);
  console.log('订单详情',props.checkedItem);
  data.fields.forEach((item:any)=>{
    keys.forEach((key:string)=>{
      if(key == item.prop){
        item.value = props.checkedItem[key]
      }
    })
  })
  data.dataInfo = JSON.parse(props.checkedItem.err_desc)
}

const emit = defineEmits(['onHideDetails'])
// 取消
const onHideDetails = async () => {
  emit('onHideDetails', false)
}
</script>

<style lang="scss" scoped>
.paddingL20{
  display: flex;
  margin-bottom: 10px;
}
</style>
